<template>
	<view class="container">
			<!-- 商品列表 -->
			<view class="products_container">
				<!-- 单个商品 -->
				<view class="product_container" v-for="(item, index) in cart" :key="index">
					<!-- 勾选按钮 -->
					<view @click="toggleChecked(index)" :class="item.checked ? 'icon-xuanzhong' : 'icon-xuanze'" class="check iconfont expand "></view>
					<!-- 商品图片 -->
					<view class="product_image">
						<image :src="item.goods_small_logo || '/static/empty.png'"></image>
					</view>
					<!-- 商品信息 -->
					<view class="product_info">
						<view class="title">{{item.goods_name}}</view>
						<view class="price_counter_container">
							<view class="price">¥{{item.goods_price}}</view>
							<view class="counter">
								<view @click="reduce(index)" class="iconfont icon-jianshao1 expand"></view>
								<view class="amount">{{item.amount}}</view>
								<view @click="add(index)" class="iconfont icon-tianjia expand"></view>
							</view>
						</view>
					</view>
				</view>
	
			</view>
			<!-- 总计 -->
			<view class="total_container">
				<!-- 全选 -->
				<view class="all_checked" @click="toggleAllChecked">
					<view :class="allChecked ? ' icon-xuanzhong': 'icon-xuanze'" class="iconfont expand"></view>
					<view class="text">全选</view>
				</view>
				<!-- 合计 -->
				<view class="total">
					<text class="title">合计：</text>
					<text class="price">¥{{totalPrice}}</text>
				</view>
				<view class="goToPay" @click="goToPay">去结算({{totalCount}})</view>
			</view>
		</view>
</template>

<script>
	export default {
		data() {
			return {
				cart: []
			};
		},
		onShow() {
			// console.log('cart on show')
			// 从本地存储获取数据，并渲染
			// 这里可以使用同步的获取本地数据，为什么这里可以用同步
			this.cart = uni.getStorageSync('cart');
		},
		onHide() {
			// 当页面隐藏的时候，把购物车写入到本地缓存
			uni.setStorage({
				key: 'cart',
				data: this.cart
			})
		},
		methods: {
			// 减少数量
			reduce(i) {
				// 获取当前修改的商品对象
				const product = this.cart[i];
				if (product.amount === 1) {
					// 提示是否删除商品
					uni.showModal({
						title: '提醒',
						content: '是否真的删除该商品',
						confirmText: '删除', // 修改确认按钮的文字
						success: (e) => {
							// e 会得到用户点击按钮的状态，如果cancel为true表示点击取消，confirm为true表示点击删除
							// 表示点击删除按钮
							if (e.confirm) {
								// 把商品从购物车移除
								this.cart.splice(i, 1);
							}
						}
					})
				} else {
					product.amount--;
				}
			},
			// 增加数量
			add(i) {
				const product = this.cart[i];
				product.amount++;
			},
			// 切换商品选中状态
			toggleChecked(i) {
				this.cart[i].checked = !this.cart[i].checked;
				this.cart.splice(i, 1, this.cart[i])
			},
			// 切换全选状态
			toggleAllChecked() {
				const cart = this.cart.map((item, index) => {
					return { ...item , checked: !this.allChecked}
				})
				this.cart = cart;
			},
			goToPay() {
				uni.setStorage({
					key: 'cart',
					data: this.cart
				}).then(() => {
					uni.navigateTo({
						url: `/pages/pay/index?totalPrice=${this.totalPrice}&totalCount=${this.totalCount}`
					})
				})
			}
		},
		computed: {
			// 全选状态
			allChecked() {
				let isAllCheck = true
				// 遍历购物车，判断商品是否全选或者非全选
				this.cart.length && this.cart.forEach(item => {
					if (!item.checked) {
						isAllCheck = false;
					}
				})
				return isAllCheck;
			},
			totalPrice() {
				let totalPrice = 0;
				this.cart.length && this.cart.forEach(item => {
					if (item.checked) {
						totalPrice += item.amount * item.goods_price
					}
				})
				return totalPrice;
			},
			totalCount() {
				let total = 0;
				this.cart.length && this.cart.forEach(item => {
					if (item.checked) {
						total += item.amount;
					}
				})
				return total;
			}
		}
	}
</script>

<style lang="less">
	.container {
		.products_container {
			margin-bottom: 83rpx;
		}
		.icon-xuanze {
			color: #8A8A8A;
		}
		.icon-xuanzhong {
			color: #E03440;
		}
		.product_container {
			display: flex;
			margin: 9rpx 26rpx;
			.check {
				font-size: 35rpx;
				margin-right: 35rpx;
				align-self: center;
			}
			.product_image {
				margin-right: 19rpx;
				image {
					width: 191rpx;
					height: 191rpx;
				}
			}
			.product_info {
				width: 100%;
				padding: 26rpx 0;
				font-size: 24rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				.title {
					color:#434343;
				}
				.price_counter_container {
					display: flex;
					justify-content: space-between;
					align-items: center;
					.price {
						color: #EA4350;
					}
					.counter {
						display: flex;
						justify-content: space-between;
						color:  #8A8A8A;
						font-size: 30rpx;
						width: 160rpx;
						align-items: center;
						.iconfont {
							font-size: 46rpx;
						}
					}
				}
			}
		}
		.total_container {
			display: flex;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 83rpx;
			border: 1rpx solid #EEEEEE;
			align-items: center;
			justify-content: space-between;
			margin: 0 23rpx;
			background: #fff;
			.all_checked {
				font-size: 35rpx;
				display: flex;
				align-items: center;
				.text {
					font-size: 21rpx;
					color: #8A8A8A;
					margin-left: 24rpx;
				}
			}
			.total {
				flex:1;
				display: flex;
				align-items: center;
				margin-left: 36rpx;
				.title {
					color:#292929;
					font-size: 26rpx;
				}
				.price {
					color: #EA4350;
					font-size: 28rpx;
				}
			}
			.goToPay {
				width: 150rpx;
				height: 52rpx;
				border-radius: 26rpx;
				background-color: #EA4350;
				color: #fff;
				font-size: 21rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>